<template>
  <a-drawer
    :title="title"
    width="70%"
    :visible="localVisible"
    :body-style="{ paddingBottom: '80px' }"
    @close="handleCancel"
  >
    <a-skeleton :loading="localLoading">
    </a-skeleton>
    <div
      :style="{
        position: 'absolute',
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e8e8e8',
        padding: '10px 16px',
        textAlign: 'left',
        left: 0,
        background: '#fff',
        borderRadius: '0 0 4px 4px',
      }"
    >
      <a-button type="primary" style="marginLeft: 8px" @click="handleOk" :loading="localLoading">
        新建
      </a-button>
      <a-button type="primary" style="marginLeft: 8px" ghost @click="handleOk(true)" :loading="localLoading">
        新建并继续
      </a-button>
      <a-button style="marginLeft: 8px" @click="handleCancel">
        取消
      </a-button>
    </div>
  </a-drawer>
</template>

<script>
export default {
  name: 'DrawerModal',
  props: {
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    ok: {
      type: Function,
      required: true
    }
  },
  data () {
    return {
      localVisible: this.visible,
      localLoading: false
    }
  },
  watch: {
    visible (val, preVal) {
      console.log('数据变化 val, preVal ->', val, preVal)
      this.localVisible = !!(val && !preVal)
    }
  },
  methods: {
    handleCancel () {
      this.localVisible = false
    },
    handleOk (con = false) {
      this.localLoading = true
      this.$emit('ok', con)
    }
  }
}
</script>

<style scoped>

</style>
